<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>ad</title>
    <!-- <link rel="stylesheet" type="text/css" href="../css/api.css" /> -->
    <style type="text/css">
        html,
        body {
            height: 100%;
            background-color: #FFFFFF;
        }

        .item {
            padding: 13px;
            box-sizing: border-box;
            height: 67px;
            width: 100%;
            position: relative;
            border-top: 1px solid #F8F8F8;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: horizontal;
            -webkit-flex-flow: row;
            flex-flow: row;
        }

        .pic,
        .dic {
            height: 100%;
            display: inline-block;
        }

        .dic {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            flex: 1;
            line-height: 25px;
        }

        .pic img {
            height: 39px;
            width: 39px;
            margin-right: 10px;
            margin-top: 6px;
        }

        .title {
            color: #222;
            font-size: 15px;
            line-height: 28px;
        }

        .num {
         height: 25px;
         font-size: 12px;
         color: #C9C9C9;
         display: -webkit-box;
         -webkit-line-clamp: 1;
         -webkit-box-orient: vertical;
         overflow: hidden;
     }

     .concern {
        width: 54px;
        height: 28px;
        color: #2a90d7;
        font-size:12px;
        background-color: #fff;
        border: 1px solid #2a90d7;
        text-align: center;
        line-height: 28px;
        border-radius: 6px;
        margin-top:5px;
    }
</style>
</head>

<body>
    <div id="theme"></div>
    
</body>
<script id="template" type="text/template">
    {{~ it:data }}

    <div class="item">
        <div class="pic"><img src="{{=data.thumbnail.url}}"></div>
        <div class="dic">
            <div class="title">{{=data.name}}</div>
            <div class="num">{{=data.subscriptionCount}}人已关注{{=data.childCount}}条帖子</div>
        </div>
        <div class="concern">关注</div>
    </div>
    {{~}}
</script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/APICloud-rest.js"></script>
<script type="text/javascript">
    apiready = function() {
        fnInit();
    };
    var dot, theme;

    function fnInit() {
        theme = $api.byId('theme');
        var template = $api.byId('template');
        dot = doT.template(template.innerHTML);
    }

    function getTheme(type) {
        var client = new Resource("A6918573369588", "20C93719-0DE5-8C9B-2F05-36D9BB835C02");
        var Theme = client.Factory("theme");
        Theme.query({
            "filter": {
                "where": {
                    "type": type
                },
                "skip": 0,
                "limit": 20
            }
        }, function(ret, err) {
            theme.innerHTML = dot(ret);
        })

    }
</script>

</html>
